<style lang="scss">

</style>

<template>
  <template v-if="inited">


    <z-cell-item class="a-space-mb-10" label="显示条件" label-width="60px">
<!--      <el-input  style="width: auto; flex: 1"-->
<!--                 v-model="state.value.data.label" @blur="onBlur"></el-input>-->

      <cus-insert-v2
          con-class="cus-data-source__insert"
          v-model="state.value.data.label"
          :on-modal-closed="onV2ModalClosed"
          :before-modal-opened="beforeInsertV2ModalOpened"
          @modalClosed="onChange"
          :field_uuid="field_uuid"
      ></cus-insert-v2>
    </z-cell-item>

  </template>

</template>

<script>
import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import {nextTick, reactive, toRaw, inject} from "vue";
import ZCellItem from "@/plugins/z-frame/components/ZCellItem.vue";

export default {
  name: 'CusPanelControl',
  components: {ZCellItem },
  mixins: [
    CustomRenderControlMixin
  ],
  setup(props, ctx) {

    let {part_key} = props.defs;
    // console.log(props)

    let ZDragxmlInstance = inject('ZDragxmlInstance')

    function parseCachedData(obj) {
      if (!obj.data) {
        obj.data = {}
      }
    }

    let obj;
    let JSON5 = ZY.JSON5;
    let { data, methods, listeners, init, widgetConfig2, curFormCon, setModelVal } = defineCustomRender(props, ctx, {
      handleValueInit(newVal) {
        // console.log('CusUI', newVal, typeof  newVal)
        if (!newVal) {
          newVal = {
            // classObj: {},
            // attrsObj: {},
            control: {
              propsV2: {}
            },
            data: {}
          }
          return newVal
        }
        if (newVal) {
          try {
            obj = JSON5.parse(newVal)
            // console.log(obj)
            parseCachedData(obj)

            return obj
          } catch (e) {
            console.log(e)
          }
        }
        return {}
      }
    })
    let state = data({
      value: {}
    })
    init(props)

    function getCachedVal() {
      let clonedValue = JSON5.parse(JSON5.stringify(state.value))
      // console.log(clonedValue)
      Reflect.deleteProperty(clonedValue, 'control')
      return clonedValue
    }

    function onChange() {
      let str = JSON5.stringify(getCachedVal())
      // console.log('onChaneg')
      methods.onChange(str)
      // curFormCon.comManager.context.sendEvent('save:form', {
      //
      // })
      // curFormCon.comManager.context.sendEvent('save:cusui', {
      //   str
      // })
    }

    function beforeInsertV2ModalOpened({toolState, funTools}) {
      let insVars = ZDragxmlInstance.getInsVarsV2()
      toolState.insertedVarsV2 = [].concat(
          insVars
      )
      // console.log(funTools)
      funTools.setFuns([
        {
          label: '操作函数',
          children: [
            {
              label: 'M',
              value: 'M',
              notice: `M(字段名):获取字段的值。
示例:
M(字段1)  获取字段1的值
            `
            },
            {
              label: 'SELECT_LABEL',
              value: 'SELECT_LABEL',
              notice: `SELECT_LABEL(字段名):获取字段的label。
示例:
SELECT_LABEL(字段1)  获取字段字段1的label
            `
            },
            {
              label: 'EQ',
              value: 'EQ',
              notice: `EQ(值1,值1):比较2个值是否相等。
示例:
EQ(1,1)  1和1相等 返回true
            `
            },
          ],
        }
      ], {useLib: false})
    }
    function onV2ModalClosed({getText}) {
      // let textObj = getText()
      // console.log('onV2ModalClosed', textObj)
    }


    function save() {
      onChange()
    }

    function onBlur() {
      // console.log('onBlur')
      onChange()
    }

    let propsState = reactive({
      props: {}
    })

    function setPropVal(props, key, e) {
      props[key] = e
      let obj = toRaw(props)
      state.value.data.attrs = Object.entries(obj)


      // console.log('setPropVal', obj, key, e, state.value.data.attrs );
      // curFormCon.callPageEvent('cus-ui__set-prop-val', {
      //   props: obj, key, value: obj[key]
      // }, e);
      // nextTick(() => {
      //   onBlur()
      // })
    }

    let exportCtx = {
      getExportData() {
        return getCachedVal()
      },
      importData(data) {
        setModelVal(JSON5.stringify(data))
        nextTick(() => {
          onChange()
          curFormCon.callPageEvent('cus-ui__import_data', {
            props: obj,
          }, {});
        })
      }
    }

    return {
      state,
      widgetConfig: widgetConfig2,
      onChange,
      beforeInsertV2ModalOpened,
      onV2ModalClosed,
      methods,
      propsState,
      exportCtx,
      setPropVal,
      onBlur,
      save,
      listeners,
    }
  },
}
</script>

